<template>
  <div class="el-icon">
    <svg :class="['svg-icon', className]" :style="iconStyle" aria-hidden="true">
      <use :xlink:href="iconName"></use>
    </svg>
  </div>
</template>

<script lang="ts" setup>
  import { computed } from 'vue'

  interface Props {
    name?: string
    iconClass?: string // 保持向后兼容
    size?: string | number
    className?: string
  }

  const props = withDefaults(defineProps<Props>(), {
    name: '',
    iconClass: '',
    size: '1em',
    className: '',
  })

  const iconName = computed(() => {
    // 优先使用 iconClass (向后兼容)，然后使用 name
    const iconValue = props.iconClass || props.name
    if (!iconValue) return '#icon'
    const cleanName = iconValue.endsWith('-svg') ? iconValue.replace(/-svg$/, '') : iconValue
    return `#icon-${cleanName}`
  })

  const iconStyle = computed(() => {
    const size = typeof props.size === 'number' ? `${props.size}px` : props.size
    return {
      width: size,
      height: size,
      fontSize: size,
    }
  })
</script>

<style scoped lang="scss">
  .svg-icon {
    vertical-align: -0.15em;
    flex-shrink: 0;
    fill: currentColor;
    overflow: hidden;
  }
</style>
